<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <script type="text/javascript" src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/gt.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="__CSS__/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/admin.css">
</head>
<body>
<form role="form" class="form-horizontal" action="" method="post" autocomplete="off">
    <div class="loginborder">
    <h1>用户登录</h1>
    <div class="container login">
        <div class="form-group inputs">
            <label for="username" class=col-lg-2>管理员</label>
            <input id="username" class="form-control username col-lg-10  lg-input"   autocomplete="off" type="text" placeholder="请输入管理员名字" name="username"
                   value="">

        </div>
        <div class="form-group inputs">
            <label for="password" class="col-lg-2">密码</label>
            <input id="password" class="form-control password col-lg-10 lg-input"  autocomplete="new-password" type="password" placeholder="请输入密码" name="password"
                   value="">

        </div>
        <div class="form-group inputs">
            <div id="embed-captcha" style="position:relative;left:  8px;"></div>
            <p id="wait" class="show">正在加载验证码......</p>
            <p id="notice" class="hide">请先完成验证</p>
        </div>
        <div class="form-group">
            <button class="btn" type="submit"  id="loginbtn" >登录</button>

        </div>
    </div>

    </div>
</form>
<script type="text/javascript">
window.onload=function () {
    var handlerEmbed = function (captchaObj) {
        var f=1;
        $("#loginbtn").click(function (e) {
            var validate = captchaObj.getValidate();
            $('.lg-input').each(function () {
               if ($(this).val()==''){
                   $(this).css('border','red 1px solid')
                   $(this).after('<span class="errortips">'+$(this).prev().text()+'不能为空'+'</span>');
                   $(this).next().css('left','460px').css('top',' 0');
                   f=0;
                   e.preventDefault();
               }
            });
                 if (!validate) {
                     $("#notice")[0].className = "show";
                     setTimeout(function () {
                         $("#notice")[0].className = "hide";
                     }, 2000);
                     e.preventDefault();
                 }else{
                     $.ajax({
                         url:"{:Url('admin/Login/geetest_check')}",
                         type:'post',
                         dataType:'json',
                         data:{

                             geetest_challenge: validate.geetest_challenge,
                             geetest_validate: validate.geetest_validate,
                             geetest_seccode: validate.geetest_seccode,
                         },
                         success:function (data) {
                             console.log(data)
                         }



                     })


                 }



        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    var url="{:Url('admin/Login/geetest_show_verify',[d=>dddd])}";
    url=url.replace(/dddd/,(new Date()).getTime());

    $.ajax({
        // 获取id，challenge，success（是否启用failback）

        url:url, // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success ,// 表示用户后台检测极验服务器是否宕机，一般不需要关注
                width:'350px',
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        },

    });
}




</script>
 
</body>
</html>